<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>省市区三级联动</title>
	<script src="jquery-3.2.1.min.js"></script>
	<script src="pcas-location.js"></script>
	<style>
		html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, menu, nav, output, ruby, section, summary, time, mark, audio, video{
			  margin: 0;
			  padding: 0;
			  border: 0;
			  text-decoration: none;
			  font-size: 100%;
			  font-family:  "Microsoft YaHei";
			}
			ul,li,p,h1,h2,h3,h4,h5,h6,dl,dt,dd {
			  list-style:none;
			}
		html,body{
			width:100%;height:100%;
		}

		.city-title{
			border: 1px solid #E2E2E2;
	    padding: 5px 8px;
	    color: #555;
		}
		.city-mask{
			background-color: rgba(0, 0, 0, 0.4);
	    position: fixed;z-index: 500;
	    bottom: 0;right: 0; left: 0;top: 0;
	    display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;
	    -webkit-box-pack: center;-webkit-justify-content: center;
	    -ms-flex-pack: center;justify-content: center;
	    -webkit-box-align: center;-webkit-align-items: center;
	    -ms-flex-align: center;align-items: center;
		}
		.city-select{
			position: fixed;
	    bottom: 0;left: 0;
	    width: 100%;height: 75%;overflow-y:auto;overflow-x: hidden;
	    z-index: 1000; background-color: #fff;
	    -webkit-transform: translate(0, 100%);transform: translate(0, 100%);-webkit-transition: -webkit-transform .3s;
	    transition: -webkit-transform .3s;transition: transform .3s;transition: transform .3s, -webkit-transform .3s;
		}
		.city-select.brouce-in{
			-webkit-transform: translate(0, 0);transform: translate(0, 0);
		}
		.city-select-header{
			position: absolute;top: 0;left: 0;
			width: 100%;z-index: 1;
		}
		.city-select-title{
			width: 100%;font-size: .3rem;text-align: center;
	    height: 45px;line-height: 45px;position: relative;
		}
		.city-select-title:after {
	    content: '';position: absolute;
	    z-index: 0;bottom: 0;left: 0;width: 100%;height: 1px;
	    border-bottom: 1px solid #B2B2B2;-webkit-transform: scaleY(0.5);
	    transform: scaleY(0.5);-webkit-transform-origin: 0 100%;transform-origin: 0 100%;
		}
		.city-select-nav{
			width: 100%;padding-left: .2rem;overflow: hidden;
	    display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;
		}
		.city-select-nav > a {
	    font-size: .26rem;color: #222;display: block;
	    height: 40px;line-height: 46px;text-decoration: none;
	    padding: 0 .2rem;position: relative;
	    margin-right: .15rem;white-space: nowrap;
	    overflow: hidden;text-overflow: ellipsis;max-width: 40%;
		}
		.city-select-nav > a.crt {
	    color: #F23030;
		}
		.city-select-nav > a.crt:after {
	    content: '';
	    width: 100%;height: 2px;
	    background-color: #F23030;
	    position: absolute;bottom: 0;left: 0;z-index: 2;
		}
		.city-select-content{
			height: 100%;padding-top: 85px;
	    width: 100%;display: -webkit-box;display: -webkit-flex;
	    display: -ms-flexbox;display: flex;
		}
		.city-select-content>.city-select-item{
			display: block;height: inherit;width: 25%;overflow-x: hidden;
	    -webkit-box-flex: 0;-webkit-flex: 0 0 25%;-ms-flex: 0 0 25%;flex: 0 0 25%;
	    overflow-y: auto;-webkit-overflow-scrolling: touch;
	    background-color: #FFF;border-right: 1px solid #D9D9D9;
		}
		.city-select-item-box{
			width: 250%;height: inherit;
	    display: block; padding: 0 .4rem;
		}
		.city-select-item-box > a {
	    color: #333;font-size: .26rem;height: 40px;line-height: 40px;
	    overflow: hidden;
	    display: -webkit-box;display: -webkit-flex;
	    display: -ms-flexbox;display: flex;
	    -webkit-box-align: center;-webkit-align-items: center;-ms-flex-align: center;
	    align-items: center;width: 100%;position: relative;z-index: 1;
		}
		.city-select-item-box > a.crt {
	    color: #F23030;
		}
		.city-select-item-box > a:before {
	    content: '';
	    position: absolute;
	    z-index: 0;bottom: 0;left: 0;
	    width: 100%;height: 1px;
	    border-bottom: 1px solid #D9D9D9;
	    -webkit-transform: scaleY(0.5);
	    transform: scaleY(0.5);
	    -webkit-transform-origin: 0 100%;
	    transform-origin: 0 100%;
		}
  </style>
</head>
<body>

	<div class="city-title">请选择省市区</div>
	
	<!-- 弹出地址选择 -->
	<div class="city-select brouce-in">
		<!-- 头部 -->
		<div class="city-select-header">
			<p class="city-select-title">所在地区</p>
			<div class="city-select-nav">
				<a id="province-nav" href="javascript:;" class="crt">请选择</a>
				<a id="city-nav" href="javascript:;" class=""></a>
				<a id="area-nav" href="javascript:;" class=""></a>
				<a id="street-nav" href="javascript:;" class=""></a>
			</div>
		</div>
		<!-- 选择区 -->
		<ul class="city-select-content">
			<li class="city-select-item">
				<div id="province" class="city-select-item-box">
					
				</div>
			</li>
			<li class="city-select-item">
				<div id="city" class="city-select-item-box"></div>
			</li>
			<li class="city-select-item">
				<div id="area" class="city-select-item-box"></div>
			</li>
			<li class="city-select-item">
				<div id="street" class="city-select-item-box"></div>
			</li>
		</ul>
	</div>
	<!-- 遮罩层 -->
	<div class="city-mask"></div>

<script>
	let China = new Location();
	let ChinaData = China.citys; //中华人民共和国城市数据

	let citys; //选中省份后获得下面的所有地级市数据
	let areas; //选中地级市后获得下面的所有县级市数据
	let streets; //选中县级市后获得下面的所有街镇数据

	let address = Array(4); //四个长度的数组，存放地址选择的结果

	/*根据code和子级全部数据,获得选中的完整数据*/
	function getData(str,arr){
		let data;
		arr.forEach(function(e,i,arr){
			if(e.name == str){
				data = e;
			}
		});
		return data;
	}
	/*查找对象中是否有children属性*/
	function findChildren(obj){
		for(var name in obj){
			if(obj.hasOwnProperty("children")){
				return true;
			}else{
				return false;
			}
		}
	}
	/*根据父级数据加载对应的子级数据*/
	function loadHtml(obj){
		let str = "";
		let data = obj.children;
		obj.children.forEach(function(e,i,arr){	
			str += `
				<a title="${e.name}" code="${e.code}" href="javascript:;" class="">${e.name}</a>
			       `;
		});
		return {"html":str , "data":data};
	}

	/*1. 默认加载省份数据*/
	function loadProvince(arr){
		let str = "";
		arr.forEach(function(e,i,arr){
			str += ` 
			      <a title="${e.name}" code="${e.code}" href="javascript:;" >${e.name}</a>
			       `;
		})
		$("#province").append(str);
	}
	loadProvince(ChinaData);


	/*2. 选择省份事件*/
	$("#province").on("click","a",function(){
		/*点击颜色变化*/
  	$("#province a").removeClass("crt");
  	$(this).addClass("crt");

  	/*2.1 获取省份value*/
  	let value = $(this).attr("title");
  		
  	//将选中的地址存放到数组中	
  	//先清空数组
  	address.forEach(function(e,i,arr){
  		delete address[i];
  	});
  	address[0] = value;loadAddress(address);
  	$("#province-nav").html(value);
  	$(".city-select-nav a").removeClass("crt");
  	$("#province-nav").addClass("crt");
  	
  	let provinceSelect = getData(value,ChinaData); //获取选中的省份的全部数据
		/*2.2 判断是否有children属性*/
		if(findChildren(provinceSelect)){

			$("#city").empty();
			$("#city").append(loadHtml(provinceSelect).html);

			citys = loadHtml(provinceSelect).data;  //获得子级全部数据
			
		}else{
			$(".city-select").removeClass("brouce-in");
			$(".city-mask").css("display","none");
		}
	});


	/*3. 选择地级市事件*/
	$("#city").on("click","a",function(){
		/*点击颜色变化*/
  	$("#city a").removeClass("crt");
  	$(this).addClass("crt");

  	/*3.1 获取地级市title*/
  	let value = $(this).attr("title");

  	address[1] = value;loadAddress(address);
  	$("#city-nav").html(value);
  	$(".city-select-nav a").removeClass("crt");
  	$("#city-nav").addClass("crt");

  	let citySelect = getData(value,citys); //获取选中的地级市的全部数据

  	/*3.2 判断是否有children属性*/	
  	if(findChildren(citySelect)){

			$("#area").empty();
			$("#area").append(loadHtml(citySelect).html);	

			areas = loadHtml(citySelect).data; //获得子级全部数据
			
  	}else{
  		$(".city-select").removeClass("brouce-in");
			$(".city-mask").css("display","none");
  	}
	});

	/*4. 选择县级市*/
	$("#area").on("click","a",function(){
		/*点击颜色变化*/
  	$("#area a").removeClass("crt");
  	$(this).addClass("crt");

  	/*4.1 获取县级市title*/
  	let value = $(this).attr("title");

  	address[2] = value;loadAddress(address);
  	$("#area-nav").html(value);
  	$(".city-select-nav a").removeClass("crt");$("#area-nav").addClass("crt"); 

  	let areaSelect = getData(value,areas); //获取选中的县级市的全部数据

  	/*4.2 判断是否有children属性*/	
		if(findChildren(areaSelect)){

			$("#street").empty();
			$("#street").append(loadHtml(areaSelect).html);	

			streets = loadHtml(areaSelect).data; //获得子级全部数据
			
  	}else{
  		$(".city-select").removeClass("brouce-in");
			$(".city-mask").css("display","none");
  	}
	});

	/*5. 选择街镇*/
	$("#street").on("click","a",function(){
		/*点击颜色变化*/
  	$("#street a").removeClass("current");
  	$(this).addClass("current");

  	/*4.1 获取县级市title*/
  	let value = $(this).attr("title");

  	address[3] = value;loadAddress(address);
  	$("#street-nav").html(value);
  	$(".city-select-nav a").removeClass("crt");$("#street-nav").addClass("crt");

  	$(".city-select").removeClass("brouce-in");
		$(".city-mask").css("display","none");
	});

	/*将选取的结果加载到页面上*/
	function loadAddress(arr){
		let result = arr[0];
		//判断后面是否为空，为空就不显示"-"
		arr.forEach(function(e,i,arr){
			if(i>0){
				if(e != undefined){
					result += "-";
					result += e;
				}
			}
		});
		$(".city-title").html(result);
		$(".city-title").css("color","#000");
	}

	/*点击地址选择框弹出模态框*/
	$(".city-title").click(function(){
		$(".city-select").addClass("brouce-in");	
		$(".city-mask").css("display","block");
	});
	/*点击遮罩层隐藏弹出框*/
	$(".city-mask").click(function(){
		$(".city-select").removeClass("brouce-in");
		$(".city-mask").css("display","none");
	});

</script>
</body>
</html>